<template>
  <a-select placeholder="请选择权限" style="min-width: 120px" mode="multiple" v-model="innerValue">
    <a-select-option v-for="item in options" :value="item.id">
      {{ item.actionName }}
    </a-select-option>
  </a-select>
</template>
<script>
import {createModelForVue, createProps} from '@/utils';
import {createFormDefinition} from '@comp/hhd/design/FormDesigner/types';

export default {
  name: 'FormActioinSelector',
  model: createModelForVue(),
  props: {
    formDefinition: createProps(Object, createFormDefinition),
    actionType: createProps(String),
    value: createProps(String),
  },
  methods: {},
  computed: {
    options() {
      let actions = this.formDefinition && this.formDefinition.actions || [];
      return actions.filter(action => action.actionType === this.actionType);
    },
    innerValue: {
      get() {
        if (!this.value) return undefined;
        return this.value.split(',');
      },
      set(v) {
        this.$emit('change', v && v.toString() || undefined);
      },
    }
  }
};
</script>